export const useAppStore = defineStore("app", () => {
  const sidebarStatus = useStorage("sidebarStatus", "0");

  const globalSettings = useStorage("globalSettings", false);

  const sidebar = reactive({
    opened: sidebarStatus.value === "1",
    withoutAnimation: false,
    hide: false
  });

  const device = ref<string>("desktop");
  const size = useStorage("size", "medium");

  const toggleSideBar = (withoutAnimation: boolean) => {
    sidebar.opened = withoutAnimation;
    sidebar.withoutAnimation = withoutAnimation;
    if (sidebar.opened) {
      sidebarStatus.value = "1";
    } else {
      sidebarStatus.value = "0";
    }
  };

  const closeSideBar = ({ withoutAnimation }: any): void => {
    sidebarStatus.value = "0";
    sidebar.opened = false;
    sidebar.withoutAnimation = withoutAnimation;
  };
  const toggleDevice = (d: string): void => {
    device.value = d;
  };
  const setSize = (s: string): void => {
    size.value = s;
  };
  const setGlobalSettings = (s: boolean): void => {
    globalSettings.value = s;
  };
  const toggleSideBarHide = (status: boolean): void => {
    sidebar.hide = status;
  };

  return {
    device,
    sidebar,
    size,
    globalSettings,
    toggleSideBar,
    closeSideBar,
    toggleDevice,
    setSize,
    setGlobalSettings,
    toggleSideBarHide
  };
});

export default useAppStore;
